<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
  import { createOrderAPI, getArchiveDetailAPI, getPreOrderAPI, payAPI } from '@/api'
  import { GlobalVariable, PAGE_PATH } from '@/constants'
  import { useConsultStore } from '@/store/consult'
  import type { PatientForm } from '@/types/archive'
  import type { OrderPreData } from '@/types/consult'
  import { onMounted, ref } from 'vue'

  const orderId = ref('') // 订单id
  const store = useConsultStore()
  const patientInfo = ref<PatientForm>({} as PatientForm) // 患者信息

  const orderInfo = ref<OrderPreData>({} as OrderPreData)
  // 订单信息
  const getPreOrder = async () => {
    orderInfo.value = await getPreOrderAPI({ illnessType: store.illnessType, type: store.type })
  }
  // 获取患者信息
  const getArchiveDetail = async () => {
    patientInfo.value = await getArchiveDetailAPI(store.illnessInfo.patientId)
  }
  // getPreOrder() // 在这里获取数据也是可以的， 这里不能操作dom
  onMounted(() => {
    getPreOrder()
    getArchiveDetail()
  })
  // 去支付
  const toPay = async () => {
    if (orderId.value) {
      uni.showToast({
        title: '不能重复下单',
        icon: 'none',
      })
      return
    }
    // 先生成订单
    const res = await createOrderAPI({
      type: store.type, // 问诊类型
      illnessType: store.illnessType, // 三甲 二甲
      depId: store.id, // 科室
      ...store.illnessInfo, // 图片-描述-发病时间-是否就诊过
    })
    store.clear() // 清除缓存数据
    orderId.value = res.id // 把订单id记录下来
    // res.id 订单id 才可以支付
    // 清除之前pinia中存储的那些数据
    // 打开弹层
    payRef.value.open() // 打开支付弹层
  }
  const payRef = ref()
  // 关闭弹层
  const close = async () => {
    // 此时 先创建的订单 再弹出的层 关闭支付窗口 放弃支付 提醒用户一下是否要放弃支付
    const res = await uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })
    if (!res.confirm) {
      // 仍要关闭
      payRef.value.close()
      // 此时用户要放弃！！！！
      uni.reLaunch({
        url: PAGE_PATH.HOME_PAGE,
      })
      // switchTab
      // navigateTo
      // redirectTo
      // reLaunch-支持tabbar跳转
    }
  }
  // 确认支付
  const confirm = async (index: number) => {
    if (index === 0) {
      return uni.showToast({ title: '当前暂不支持微信支付', icon: 'none' })
    }
    // 做支付宝支付
    const res = await payAPI({
      orderId: orderId.value,
      paymentMethod: '1',
      payCallback: GlobalVariable.HOST_URL + PAGE_PATH.ROOM_PAGE, // 支付成功回跳的地址
    })
    window.location.href = res.payUrl // 支付宝的地址 不是我们项目的地址
  }
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${orderInfo.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            v-if="orderInfo.couponDeduction"
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderInfo.couponDeduction}`"
          />
          <uni-list-item v-if="orderInfo.pointDeduction" title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ orderInfo.pointDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ orderInfo.actualPayment }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientInfo.name }} | {{ patientInfo.genderValue }} | {{ patientInfo.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ orderInfo.actualPayment }}</text>
      </view>
      <button class="uni-button" @click="toPay">立即支付</button>
    </view>
    <custom-payment
      ref="payRef"
      :orderId="orderId"
      :amount="orderInfo.actualPayment"
      @close="close"
      @confirm="confirm"
    ></custom-payment>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
